<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments :: head('manageBlog')">
</head>
<body>
    <!--navigator-->
    <nav th:replace="admin/_fragments :: admin_nav('home')"></nav>

    <div class="ui attached pointing menu">
        <div class="ui container">
            <div class="right menu">
                <a href="#" class="item">Edit</a>
                <a href="#" class="active teal item">List</a>
            </div>
        </div>
    </div>
    <!--main body-->
    <div class="my-padded-tb-l">
        <div class="ui container">
            <div class="ui secondary segment form">
                <input type="hidden" name="page">
                <div class="inline fields">
                    <div class="field">
                        <input type="text" name="title" placeholder="title">
                    </div>
                    <div class="field">
                        <div class="ui search selection dropdown" id="category-dropdown">
                            <input type="hidden" name="category.id">
                            <i class="dropdown icon"></i>
                            <div class="default text">Category</div>
                            <div class="menu">
<!--                                <div class="item" data-value="1">Coding</div>-->
<!--                                <div class="item" data-value="2">Thinking</div>-->
<!--                                <div class="item" data-value="3">Gaming</div>-->
                                <div th:each="category: ${category_list}" class="item" th:data-value="${category.id}" th:text="${category.name}"></div>
                            </div>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" id="isRecommended" name="isRecommended">
                            <label for="isRecommended">recommend</label>
                        </div>
                    </div>
                    <div class="field">
                        <button type="button" id="search-btn" class="ui teal basic button"><i class="search icon"></i>Search</button>
                    </div>
                    <div class="ui button" id="clear-btn">
                        Clear
                    </div>
                </div>
            </div>

            <div id="table-container">
                <table th:fragment="blogList" class="ui compact teal table">
                    <thead>
                    <tr>
                        <th></th>
                        <th>Title</th>
                        <th>Category</th>
                        <th>Recommend</th>
                        <th>State</th>
                        <th>Update Time</th>
                        <th>Options</th>
                    </tr>
                    </thead>
                    <tbody>

                    <tr th:each="blog, iterStat: ${page.content}">
                        <td th:text="${iterStat.count}">1</td>
                        <td th:text="${blog.title}">Placeholder</td>
                        <td th:text="${blog.category.name}">useful tools</td>
                        <td th:text="${blog.isRecommended} ? 'Yes' : 'No'">Yes</td>
                        <td th:text="${blog.isPublished} ? 'Published' : 'Draft'">Yes</td>
                        <td th:text="${blog.updateTime}">04/19/2020 18:00</td>
                        <td>
                            <a href="#" th:href="@{/admin/blog/{id}/input(id=${blog.id})}" class="ui basic small teal button">edit</a>
                            <a href="#" th:href="@{/admin/blog/{id}/delete(id=${blog.id})}" class="ui basic small red button">delete</a>
                        </td>
                    </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th colspan="7">
                                <div class="ui pagination small menu" th:if="${page.totalPages}>1">
                                    <a onclick="page(this)" th:attr="data-page=${page.number}-1" th:unless="${page.first}" class="icon item my-button-width">
                                        <i class="left chevron icon"></i>
                                        <div class="my-padded-lr-ms">Previous</div>
                                    </a>
                                    <a onclick="page(this)" th:attr="data-page=${page.number}+1" th:unless="${page.last}" class="icon item my-button-width">
                                        <div class="my-padded-lr-ms">Next</div>
                                        <i class="right chevron icon"></i>
                                    </a>
                                </div>
                                <a href="#" th:href="@{/admin/blog/input}" class="ui small right floated teal basic button">New</a>
                            </th>
                        </tr>
                    </tfoot>
                </table>

                <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
                    <i class="close icon"></i>
                    <div class="header">info:</div>
                    <!--/*@thymesVar id="message" type="java.lang.String"*/-->
                    <p th:text="${message}">Succeed!</p>
                </div>
            </div>

        </div>
        
    </div>

    <!--footer-->
    <footer th:replace="_fragments :: footer"></footer>
    <div th:replace="_fragments :: basic_scripts"></div>
    <script>
        $("#menu_toggle").click(function () {
            $('.my-menu-item').toggleClass('my-mobile-hide')
        });

        $('.ui.dropdown').dropdown();

        $("#category-dropdown").dropdown({
            clearable: true,
            // apiSettings: {
            //     url: '/api/categories'
            // },
        });

        function page(obj) {
            $("[name='page']").val($(obj).data("page"));
            load_data();
        }

        $("#search-btn").click(function () {
            $("[name='page']").val(0);
            load_data();
        });

        $("#clear-btn").on('click', function () {
            $("[name='title']").val('');
            $('.form .dropdown').dropdown('clear');
            $('.form .checkbox').checkbox('uncheck');
        })

        function load_data() {
            $("#table-container").load(/*[[@{/admin/blogs/search}]]*/"/admin/blogs/search",{
                title : $("[name='title']").val(),
                categoryId : $("[name='category.id']").val(),
                isRecommended : $("[name='isRecommended']").prop('checked'),
                page : $("[name='page']").val(),
            })
        }

        //    message box closable
        $('.message .close').on('click', function () {
            $(this).closest('.message').transition('fade');
        });
    </script>
</body>
</html>